<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="../images/yc.png" type="image/x-icon">
<link rel="stylesheet" href="../css/layui.css" media="all">
</head>
<body>
	<br />
	<div class="demoTable">
		<span class="navy_padding">姓名</span>
		<div class="layui-inline">
			<input class="layui-input" name="id" autocomplete="on"
				id="findByName"">
		</div>
		<span class="navy_padding">手机号码</span>
		<div class="layui-input-inline">
			<input type="tel" name="phone" lay-verify="required|phone"
				autocomplete="off" class="layui-input" id="findByTel">
		</div>
		<button type="button" class="layui-btn layui-btn-radius"
			onclick="findOne()">查询</button>
		<!-- onclick="findOne() -->
	</div>
	<table class="layui-hide" id="user_data" lay-filter="test"></table>
	<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="edit">重置密码</a>
</script>

	<script type="text/html" id="checkboxTpl">
  <input type="checkbox" name="lock" value="{{d.mno}}" title="冻结" lay-filter="lockDemo" {{ d.status == 3 ? 'checked' : '' }}>
</script>
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/layui.all.js" charset="utf-8"></script>

<script>
let limitx = 10;
let limits = [10,20,30,50,100];
let page ={ 
		layout: ['prev', 'page', 'next', 'count', 'skip', 'limit'], //自定义分页布局
	      //,curr: 5 // 设定初始在第 5 页
	      groups: 10, // 只显示 1 个连续页码
	      first: '首页', //不显示首页
	      last: '尾页' //不显示尾页
	      
	    };
var table = layui.table, form = layui.form;
layui.use('table', function(){
	
	this.table.render({
    	elem: '#user_data',
		url:'../../member/lists',
		toolbar: '#toolbarDemo', // 开启头部工具栏，并为其绑定左侧模板
		limit:limitx,
		limits:limits,
		/*
		title: '用户信息表',
		defaultToolbar: [{
				title: '添加',
		    	layEvent: 'add',
		    	icon: 'layui-icon-add-1'
			}, 'filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
				title: '提示',
			    layEvent: 'LAYTABLE_TIPS',
			    icon: 'layui-icon-tips'
		}],*/
    	title: '用户信息表',
    	cellMinWidth: 120,
    	id: "user_data",
    	method:"POST",
	    cols: [[
	      {
			type: 'checkbox', fixed: 'center'},
	      	{field:'mno', title:'编号',fixed: 'center', unresize: true, sort: true, align: 'center'},
			{field:'nickName', title:'用户名', align: 'center' },
			{field:'email', title:'邮箱', align: 'center',  templet: function(res){
	        	return '<em>'+ res.email +'</em>'
	      	}},
			{field:'tel', title:'手机号', align: 'center'},
			{field:'regDate', title:'注册时间', align: 'center'},
			{fixed: 'right', title:'操作', toolbar: '#barDemo', align: 'center'},
			{field:'status', title:'是否冻结', width:110, templet: '#checkboxTpl', unresize: true}
	    ]],
		page: page
	});
	
	//监听锁定操作
	this.form.on('checkbox(lockDemo)', function(obj){
		layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
	});
  
	// 头工具栏事件
	this.table.on('toolbar(test)', function(obj){
    	switch(obj.event){
	    	case 'add':
	            layer.msg('添加');
	          	break;
		};
	});
  
	// 监听行工具事件
	this.table.on('tool', function(obj){
    	var data = obj.data;
    	if(obj.event === 'edit'){
    		layer.confirm( '确定要重置密码吗？',{
    			  btn: ['确定', '取消'] //可以无限个按钮
    		}, function(index, layero){
    			//console.log(obj.data.mno)
    			$.post("../../member/resetPwd",{mno:obj.data.mno},rt=>{
    				if(rt.code == 200){
    					layer.alert("修改成功")
    				}else{
    					layer.alert("修改失败...请稍后重试")
    				}
    			},"json")
    			
    		}, function(index){
    			
    		});
		}
	});
	
	form.on('checkbox(lockDemo)', function(obj){
		obj.elem.checked = !obj.elem.checked;
		form.render('checkbox'); // 渲染
		let txt = "解冻";
		let status = 1;
		if (!obj.elem.checked) {
			txt = "冻结";
			status = 3;
		}
		layer.confirm('您确定要 ' + txt + ' 该用户吗?', {btn: ['确定','取消']}, function(){
			console.log(obj.value,status);
			$.post("../../member/updateStatus",{mno:obj.value,status:status},rt=>{
				if(rt == 1){
					layer.closeAll('dialog');  //关闭提示框
					obj.elem.checked =  !obj.elem.checked;  //改变按钮状态
					form.render('checkbox');  //渲染
					return;
				}
				layer.alert(txt + "  失败，请稍后重试...",{title:"失败提示"});
			});
		});
	});
	
});


function findOne(){
	layui.use('table', function(){
		
		this.table.render({
	    	elem: '#user_data',
			url:'../../member/findOne',
			toolbar: '#toolbarDemo', // 开启头部工具栏，并为其绑定左侧模板
			limit:limitx,
			limits:limits,
			where:{
				"name":$("#findByName").val(),
				"tel":$("#findByTel").val()
			},
			/*
			title: '用户信息表',
			defaultToolbar: [{
					title: '添加',
			    	layEvent: 'add',
			    	icon: 'layui-icon-add-1'
				}, 'filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
					title: '提示',
				    layEvent: 'LAYTABLE_TIPS',
				    icon: 'layui-icon-tips'
			}],*/
	    	title: '用户信息表',
	    	cellMinWidth: 120,
	    	id: "user_data",
	    	method:"POST",
		    cols: [[
		      {
				type: 'checkbox', fixed: 'center'},
		      	{field:'mno', title:'编号',fixed: 'center', unresize: true, sort: true, align: 'center'},
				{field:'nickName', title:'用户名', align: 'center' },
				{field:'email', title:'邮箱', align: 'center',  templet: function(res){
		        	return '<em>'+ res.email +'</em>'
		      	}},
				{field:'tel', title:'手机号', align: 'center'},
				{field:'regDate', title:'注册时间', align: 'center'},
				{fixed: 'right', title:'操作', toolbar: '#barDemo', align: 'center'},
				{field:'status', title:'是否冻结', width:110, templet: '#checkboxTpl', unresize: true}
		    ]],
			page: page
		});
		
		//监听锁定操作
		this.form.on('checkbox(lockDemo)', function(obj){
			layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
		});
	  
		// 头工具栏事件
		this.table.on('toolbar(test)', function(obj){
	    	switch(obj.event){
		    	case 'add':
		            layer.msg('添加');
		          	break;
			};
		});
	  
		// 监听行工具事件
		this.table.on('tool', function(obj){
	    	var data = obj.data;
	    	if(obj.event === 'edit'){
	    		layer.confirm('确定要重置密码吗？', {
	    			  btn: ['确定', '取消'] //可以无限个按钮
	    		}, function(index, layero){
	    			//console.log(obj.data.mno)
	    			$.post("../../member/resetPwd",{mno:obj.data.mno},rt=>{
	    				if(rt.code == 200){
	    					layer.alert("修改成功")
	    				}else{
	    					layer.alert("修改失败...请稍后重试")
	    				}
	    			},"json")
	    		}, function(index){
	    			
	    		});
			}
		});
		
	});
	/*
	$.post("/member/findOne",{name:$("#findByName").val(),tel:$("#findByTel").val(),limit:limitx},rt=>{
		console.log(rt)
		this.table.cache.user_data = rt.data;
	},"json");*/
}

</script>
</body>
</html>